<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>巧用CSS实现下拉菜单</title>

<style>

a {
	color: #343434; 
	text-decoration: none
}
	
a:hover {
	color: #f60; 
	text-decoration: underline
}
#navibar {
	padding-right: 0px;
	padding-left: 0px; 
	padding-top: 0px; 
	font-size: 12px; 
	background: url(images/hb2_n.png) #f6f6f6 repeat-x 0px -49px; 
	padding-bottom: 0px; 
	margin: 0px auto;
	width: 1000px; 
	line-height: 28px; 
	position: relative; 
	height: 28px; 
	text-align: left
}
	
#navibar a {
	text-decoration: none
}
	
#navibar a:hover {
	color: #f60; 
	text-decoration: none
}

#navibar .navL {
	float: left; 
	width: 600px
}
	
#navibar .navL a {
	display: inline-block
}
	
#navibar .navL a:hover {
	text-decoration: underline
}
	
#navibar .navL .drop1 {
   display: inline-block;
	z-index: 3; 
	position: relative;
}  
	
#navibar .navL .drop1 a:hover {
	text-decoration: underline
}
	
#navibar .navL .trigger1 {
	padding-right: 0px; 
	padding-left: 5px; 
	font-weight: bold;
	z-index: 460; 
	padding-bottom: 0px; 
	width: 92px; 
	padding-top: 0px; 
	position: relative
}
	
#navibar .navL .trigger1 s {
	right: 5px; 
	background: url(images/hb2_n.png) no-repeat -63px -86px;
	width: 7px; 
	position: absolute; 
	top: 13px; 
	height: 4px; 
}

#navibar .navL .con1 a {
	padding-right: 5px; 
	display: block; 
	padding-left: 5px; 
	padding-bottom: 0px; 
	line-height: 24px; 
	padding-top: 0px; 
	height: 24px
}
	
#navibar .navL .con1 a:hover {
	background: #3953a8; 
	color: #fff
}

#navibar .navL .con1 {
	display: none;
	z-index: 450;
	background: #fff;
	left: 0px;
	width: 98px;
	position: absolute;
	top: 0px;
	padding: 28px 1px 1px;
	border: 1px solid #d7d7d7;
}

#navibar .navL .aHover .con1 {
   display: block;
}
</style>
</head>
<body>
<div class="navibar" id="navibar">
  <div class="navL">
    <span class="drop1" onmouseover="this.className='drop1 aHover'" onmouseout="this.className='drop1'">
      <a class="trigger1" href="http://www.pconline.com.cn/">太平洋电脑网<s></s></a>
      <div class="con1">
        <a href="http://product.pconline.com.cn/" target="_blank">产品报价</a> 
        <a href="http://www.pconline.com.cn/market/" target="_blank">行情中心</a> 
        <a href="http://dl.pconline.com.cn/" target="_blank">下载中心</a> 
        <a href="http://dp.pconline.com.cn/" target="_blank">摄影部落</a> 
        <a href="http://itbbs.pconline.com.cn/" target="_blank">产品论坛</a> 
      </div>
    </span>
  </div>
</div>
</body>
</html>
